<%@ include file="include.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>fotoDB</title>
</head>
<body>
	<script type="text/javascript">
		var valueOld;
		function chooseKeyword(kwnr,word){
			resultFrame=document.getElementById('resultFrame');
			resultFrame.src='<%=dbmode%>SearchApp?searchFor=thumbs&in=keyword&kwnr='+kwnr+'&word='+word;
		}
		function chooseCategory(ktnr,name){
			resultFrame=document.getElementById('resultFrame');
			resultFrame.src='<%=dbmode%>SearchApp?searchFor=thumbs&in=category&ktnr='+ktnr+'&name='+name;
		}
		function beginEdit(nr,type,thisO){
			var nameInput=document.getElementById(type+'NameInput'+nr);
			valueOld=nameInput.value;
			nameInput.style.display='inline';
			nameInput.focus();
			nameInput.select();
		}
		function endEdit(nr,type,thisO){
			if (thisO.value==valueOld){
				thisO.style.display='none';	
			}else{
				if (confirm('Wollen Sie wirklich die Name änderen?')){
					var form=document.getElementById(type + 'ModifyForm');
					var action=form.getAttribute('action');
					action = action + '&nr=' + nr + '&value=' + thisO.value;
					form.setAttribute('action', action);
					form.submit();
				}else{
					thisO.style.display='none';
					thisO.value=valueOld;
				}
			}
		}
		function doDelete(nr,type){
			if (confirm('Wollen Sie wirklich es löschen?')){
				var form=document.getElementById(type + 'DeleteForm');
				var action=form.getAttribute('action');
				action = action + '&nr=' + nr;
				form.setAttribute('action', action);
				form.submit();
			}
		}
		
		function mouseover(o){
			o.childNodes[5].style.opacity=0.6;
		}
		
		function mouseout(o){
			o.childNodes[5].style.opacity=0;
		}
	</script>
	<div id="content">
		<div id="categoryDiv" class="main">		
			<div id="category_container" style="height: auto; margin: 0px;">
				<fieldset>
				<legend align="center"><b>Kategorien</b></legend>		
				<c:forEach var="category" items="${categories}">
					<div class="category_cell" onmouseover="mouseover(this)" onmouseout="mouseout(this)">
						<a href="#" onClick="chooseCategory(<c:out value="${category.nr}"/>,'<c:out value="${category.name}"/>')">
						<c:out value="${category.name}"/>
						</a>
						<div style="position:absolute;left:8px;top:5px;">
							<input id="categoryNameInput<c:out value="${category.nr}"/>" onblur="endEdit(<c:out value="${category.nr}"/>,'category',this);" style="display:none;" type="text" value="<c:out value="${category.name}"/>" size="10"/>
						</div>
						<div style="padding:0px;padding-top:5px;opacity:0">
							<input id="categoryEditButton<c:out value="${category.nr}"/>" onclick="beginEdit(<c:out value="${category.nr}"/>,'category',this)" style="width:25px;height:25px;background:url(images/edit.png)" type="button" />
							<input onClick="doDelete(<c:out value="${category.nr}"/>,'category')" style="width:25px;height:25px;background:url(images/delete.png);margin-left:40px" type="button" />
						</div>
						<form id="categoryModifyForm" method="post" action="<%=dbmode%>UpdateApp?action=modifyCategory">
						</form>
						<form id="categoryDeleteForm" method="post" action="<%=dbmode%>UpdateApp?action=deleteCategory">
						</form>
					</div>
				</c:forEach>
				<form name="categoryInsertForm" method="post" action="<%=dbmode%>UpdateApp?action=insertCategory">
				<div style="margin-left:15px;margin-top:15px;">	
					Neue &nbsp;Kategorie: <input style="width:200px;" type="text"  name="category">
					<input style="width: 75px;" type="submit" value="speichern">
					<br>
				</div>
				</form>
				</fieldset>
			</div>
		</div>
		
		<div id="KeywordDiv" class="main">		
			<div id="keyword_container" style="height: auto; margin: 0px;">	
				<fieldset>	
				<legend align="center"><b>
					<b>Schlagwort</b>
				</b></legend>
				<c:forEach var="keyword" items="${keywords}">
					<div class="category_cell" onmouseover="mouseover(this)" onmouseout="mouseout(this)">
						<a href="#" onClick="chooseKeyword(<c:out value="${keyword.nr}"/>,'<c:out value="${keyword.word}"/>')">
						<c:out value="${keyword.word}"/>
						</a>
						<div style="position:absolute;left:8px;top:5px;">
							<input id="keywordNameInput<c:out value="${keyword.nr}"/>" onblur="endEdit(<c:out value="${keyword.nr}"/>,'keyword',this);" style="display:none;" type="text" value="<c:out value="${keyword.word}"/>" size="10"/>
						</div>
						<div style="padding:0px;padding-top:5px;opacity:0">
							<input id="keywordEditButton<c:out value="${keyword.nr}"/>" onclick="beginEdit(<c:out value="${keyword.nr}"/>,'keyword',this)" style="width:25px;height:25px;background:url(images/edit.png)" type="button" />
							<input onClick="doDelete(<c:out value="${keyword.nr}"/>,'keyword')" style="width:25px;height:25px;background:url(images/delete.png);margin-left:40px" type="button" />
						</div>
						<form id="keywordModifyForm" method="post" action="<%=dbmode%>UpdateApp?action=modifyKeyword">
						</form>
						<form id="keywordDeleteForm" method="post" action="<%=dbmode%>UpdateApp?action=deleteKeyword">
						</form>
					</div>
				</c:forEach>
				<form name="keywordInsertForm" method="post" action="<%=dbmode%>UpdateApp?action=insertKeyword">
				<div style="margin-left:15px;margin-top:15px;">	
					Neue Schlagwort: <input style="width:200px;" type="text" name="word">
					<input style="width: 75px;" type="submit" value="speichern">
					<br>
				</div>
				</form>
				</fieldset>
			</div>
		</div>
		
		<div id="resultDiv" align="center">
			<iframe id="resultFrame" name="resultFrame" width="100%" height="700px" src="showThumbs.jsp" frameborder="0" scrolling="no"></iframe>
		</div>
	</div>
</body>
</html>